<template>
    <div>
        <el-card>
            <el-table :data="skuList" style="width: 100%" border>
                <el-table-column
                    label="序号"
                    width="80"
                    type="index"
                    align="center"
                >
                </el-table-column>
                <el-table-column prop="skuName" label="名称" width="width">
                </el-table-column>
                <el-table-column prop="skuDesc" label="描述" width="width">
                </el-table-column>
                <el-table-column label="默认图片" width="110" align="center">
                    <template #default="{ row, $index }">
                        <img
                            :src="row.skuDefaultImg"
                            style="width: 100px; height: 100px"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="weight" label="重量(KG)" width="width">
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="价格(元)"
                    width="80"
                    align="center"
                >
                </el-table-column>
                <el-table-column label="操作" width="width" align="center">
                    <template #default="{ row, $index }">
                        <!-- 上架 -->
                        <el-button
                            v-if="row.isSale == 0"
                            type="info"
                            icon="el-icon-top"
                            size="mini"
                            @click="onSale(row)"
                        ></el-button>
                        <!-- 下架 -->
                        <el-button
                            type="success"
                            icon="el-icon-bottom"
                            size="mini"
                            v-else
                            @click="cancelSale(row)"
                        ></el-button>
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            size="mini"
                            @click="editSale"
                        ></el-button>
                        <el-button
                            type="info"
                            icon="el-icon-info"
                            size="mini"
                            @click="getSkuInfo(row)"
                        ></el-button>
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器   -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="text-align: center"
                :current-page="page"
                :page-sizes="[3, 5, 10]"
                :page-size="limit"
                layout="prev, pager, next, jumper, ->, total, sizes"
                :total="total"
            >
            </el-pagination>
        </el-card>
        <!-- 抽屉效果 -->
        <el-drawer
            title="我是标题"
            :visible.sync="drawerShow"
            direction="rtl"
            :show-close="false"
            size="50%"
            :before-close="drawerClose"
        >
            <el-row>
                <el-col :span="5">名称</el-col>
                <el-col :span="16">{{ skuInfo.skuName }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">描述</el-col>
                <el-col :span="16">{{ skuInfo.skuDesc }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">价格</el-col>
                <el-col :span="16">{{ skuInfo.price }}元</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">平台属性</el-col>
                <el-col :span="16">
                    <el-tag
                        type="success"
                        v-for="(attr, index) in skuInfo.skuAttrValueList"
                        :key="index"
                        style="margin-left: 4px"
                        >{{ attr.attrName }}</el-tag
                    >
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">商品图片</el-col>
                <el-col :span="10">
                    <el-carousel height="300px;">
                        <el-carousel-item
                            v-for="(skuImg, index) in skuInfo.skuImageList"
                            :key="skuImg.spuImgId"
                        >
                            <img
                                :src="skuImg.imgUrl"
                                style="
                                    width: 100%;
                                    height: 100%;
                                    object-fit: contain;
                                "
                            />
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
    </div>
</template>

<script>
export default {
    name: "Sku",
    data() {
        return {
            page: 1, // 当前页数
            // 每页数据显示量
            limit: 10,
            total: 0, // 分页器一共需要展示多少条数据
            skuList: [], // 存储sku列表的数据
            skuInfo: {}, // sku信息
            drawerShow: false,
        }
    },
    mounted() {
        this.getSkuList()
    },
    methods: {
        // 获取sku列表数据
        async getSkuList() {
            const { page, limit } = this
            // 发送请求
            const result = await this.$API.sku.reqGetSkuList(page, limit)
            // 解构拿到数据
            const { records, total } = result.data
            if (result.code == 200) {
                this.total = total
                this.skuList = records
            }
        },
        // 分页器当前页改变时触发
        handleCurrentChange(page) {
            this.page = page
            // 重新发送请求
            this.getSkuList()
        },
        // 分页器每页显示数量变化时触发
        handleSizeChange(limit) {
            this.limit = limit
            // 再次发送请求
            this.getSkuList()
        },
        // 上架
        async onSale(sku) {
            const result = await this.$API.sku.reqSkuOnSale(sku.id)
            if (result.code == 200) {
                this.$message({
                    type: "success",
                    message: "上架成功！",
                })
                this.getSkuList()
            }
        },
        // 下架
        async cancelSale(sku) {
            const result = await this.$API.sku.reqSkuCancelSale(sku.id)
            if (result.code == 200) {
                this.$message({
                    type: "success",
                    message: "下架成功！",
                })
                this.getSkuList()
            }
        },
        // 点击edit按钮的回调
        editSale() {
            this.$message({
                type: "info",
                message: "正在研发中。。。",
            })
        },
        // 获取sku详情的方法
        async getSkuInfo(sku) {
            this.drawerShow = true
            // 发送请求
            const result = await this.$API.sku.reqGetSkuDetailById(sku.id)
            if (result.code == 200) {
                this.skuInfo = result.data
            }
        },
        // drawer抽屉关闭
        drawerClose(done) {
            // 清空数据
            this.skuInfo = {}
            done()
        },
    },
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
<style scoped>
.el-row .el-col-5 {
    font-size: 20px;
    text-align: right;
    font-weight: 700;
}
.el-col {
    margin: 10px;
}
/* 深度选择器 */
::v-deep .el-carousel__button {
    width: 20px;
    height: 20px;
    background-color: #bfa;
    border-radius: 50%;
}
</style>